<template>
	<view class="cu-dialog">
	  <view class="cu-bar bg-white justify-end">
	    <view class="content">微信登录</view>
	    <view class="action" @click="hideModal()">
	      <text class="cuIcon-close text-red"></text>
	    </view>
	  </view>
	  <view class="padding">
				<view class="logo">
					<image style="height: 46px;" :src="logo"></image>
				</view>
	      <view class='content2'>
	          <view>芹菜申请获取以下权限</view>
	          <text>获得你的公开信息(昵称，头像等)</text>
	      </view>
	  </view>
	  <view class="cu-bar bg-white ">
	    <view class="actic">
	      <button  class="cu-btn bg_kl3" @click="hideModal()">取消</button>
	      <button  open-type="getUserInfo" lang="zh_CN" @click="appLoginWx"  size="default"  class="cu-btn b_kl4" >确定</button>
	    </view>
	  </view>
	</view>
</template>

<script>
	// import logo from 'http://47.93.232.75/img/imgage/imgage/.png';
	export default ({
		data() {
			return {
				logo:'http://47.93.232.75/img/tabbar/about.png'
			}
		},
		onLoad: function() {
			let _this = this;	
			uni.getSetting({
				success(res) {
					console.log("授权：", res);
					if (!res.authSetting['scope.userInfo']) {
						//这里调用授权
						console.log("当前未授权");
						_this.getUser();
					} else {
						//用户已经授权过了
						console.log("当前已授权");
					}
				}
			})
		},
		methods: {
			getUser(){
				let _this = this;
						uni.getUserProfile({
							provider: 'weixin',
							desc:'展示用户信息',
							success: (info) => { //这里请求接口
								console.log(res2);
								console.log(info);
								_this.userInfo = true;
								_this.avatar = info.userInfo.avatarUrl;
								_this.nickname = info.userInfo.nickName;
								uni.setStorage({ //缓存用户登陆状态
									key: 'MyuserInfo',
									data: info.userInfo
								})
								uni.navigateBack({
									fail:function(){
										uni.redirectTo({
											url:'../index/index'
										})
									}
								})
							},
							fail: () => {
								uni.showToast({
									title: "微信登录授权失败",
									icon: "none"
								});
							}
						})
					
			},
			appLoginWx(){
				let _this=this
				uni.getProvider({
					service: 'oauth',
					success: function(res) {
						if (~res.provider.indexOf('weixin')) {
							uni.login({
								provider: 'weixin',
								success: (res2) => {
									uni.getUserInfo({
										provider: 'weixin',
										desc:'登录',
										success: (info) => { //这里请求接口
											console.log(res2);
											console.log(info);
											_this.userInfo = true;
											_this.avatar = info.userInfo.avatarUrl;
											_this.nickname = info.userInfo.nickName;
											uni.setStorage({ //缓存用户登陆状态
												key: 'MyuserInfo',
												data: info.userInfo
											})
											uni.navigateBack({
												fail:function(){
													uni.redirectTo({
														url:'../index/index'
													})
												}
											})
										},
										fail: (res) => {
											console.log(res)
											uni.showToast({
												title: "微信登录授权失败1",
												icon: "none"
											});
										}
									})
		
								},
								fail: () => {
									uni.showToast({
										title: "微信登录授权失败2",
										icon: "none"
									});
								}
							})
		
						} else {
							uni.showToast({
								title: '请先安装微信或升级版本',
								icon: "none"
							});
						}
					}
				});
			},
			getUserInfos: function() {
				let _this = this;
				uni.getSetting({
					success: (res) => {
						if (res.authSetting['scope.userInfo'] != undefined && res.authSetting['scope.userInfo'] != true || res.authSetting[
								'scope.userInfo'] == false) {
							wx.showModal({
								title: '请求授权当前用户信息',
								content: '需要获取您的用户信息，请确认授权',
								success: function(res) {
		
									if (res.cancel) {
										wx.showToast({
											title: '拒绝授权',
											icon: 'none',
											duration: 1000
										})
		
									} else if (res.confirm) {
		
										wx.openSetting({
											success: function(dataAu) {
												if (dataAu.authSetting["scope.userInfo"] == true) {
													wx.showToast({
														title: '授权成功',
														icon: 'success',
														duration: 1000
													})
													console.log('授权后的', dataAu)
													_this.appLoginWx();
												} else {
													wx.showToast({
														title: '授权失败',
														icon: 'none',
														duration: 1000
													})
		
												}
											}
										})
									}
								}
		
							})
						} else if (res.authSetting['scope.userInfo'] == undefined) {
							//调用wx.getLocation的API
							// vm.getLocation();
						} else {
							//调用wx.getLocation的API
							// vm.getLocation();
						}
		
						setTimeout(function() {
							wx.hideLoading()
						}, 500)
					}
				})
			},
			hideModal:function(){
				console.log('hideModel');
				this.userInfo = true
				uni.navigateBack({
					fail:function(){
						uni.redirectTo({
							url:'../index/index'
						})
					}
				})
			}
		}
	})
</script>

<style>
	@import "/style/animated.wxss";
	@import "../../style/main.wxss";
	/* @import '/style/icon.wxss';
	@import '/style/icon2.wxss'; */
	
	.user {
		background: #f8f8f8;
	
	
		width: 100%;
		animation: fadeIn .9s;
	
	
	}
	
	.header {
		margin: 20rpx 0 20rpx 20rpx;
		border-bottom: 1px solid #ccc;
		text-align: center;
	
	
	
	}
	
	.cu-dialog {
		width: 100%;
	}
	
	.actic button {
		width: 47%;
	}
	
	.actic {
		display: flex;
		padding: 0px 10px;
		width: 100%;
		justify-content: space-between;
	}
	
	.header image {
		width: 100rpx;
		height: 200rpx;
	}
	
	.content2 {
	
		margin-bottom: 20rpx;
	}
	
	/* .cu-modal{
	  animation:fadeIn 1s ;
	} */
	.logo {
		width: 50px;
		height: 50px;
		margin: 0 auto;
		border-radius: 50%;
		overflow: hidden;
		margin-bottom: 10px;
		border: 2px solid #fff
	}
	
	.bg_kl3 {
		border: 1px solid#f2bf80;
		background-color: #fff !important;
		color: #f2bf80;
	
	}
	
	.b_kl4 {
		background-color: #f2bf80 !important;
		color: #fff;
	
	}
	
	.content2 text {
		display: block;
		color: #9d9d9d;
		margin-top: 40rpx;
	}
	
	.tj-sction .tj-item,
	.order-section .order-item {
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	button {
		font-weight: 400;
	}
	
	.tj-sction {
		padding-top: 10px;
		border-radius: 6px 6px 0px 0px;
		overflow: hidden;
		/* background-color:rgba(255,255,255,0.6); */
	
	}
	
	.tj-sction,
	.order-section {
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		padding: 0px;
		-webkit-justify-content: space-around;
		justify-content: space-around;
		-webkit-align-content: center;
		align-content: center;
	
	
	}
	
	.user-section {
		padding: 20rpx 30rpx;
		padding-bottom: 0px;
	
		position: relative;
		background-size: cover;
		background-position: center center;
		background-image: url('https://7472-treeworld-2g5yvz9s899bf4a6-1259429368.tcb.qcloud.la/user_bg1.png?sign=9a77fccae10229823136ec0595cb5678&t=1619763473');
		background-color: #122640
	}
	
	.user-section .bg {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 200px;
	
	}
	
	.cu-list {
		padding: 0px 30rpx;
	}
	
	.text-tree {
		font-size: 18px !important;
	}
	
	.cu-item {
		padding-left: 0px !important;
	}
	
	.user-info-box {
		height: 130rpx;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
		position: relative;
		z-index: 1;
	}
	
	.user-info-box .portrait {
		width: 120rpx;
		height: 120rpx;
	
		border-radius: 50%;
	}
	
	.user-info-box .username {
		font-size: 38rpx;
		color: #fff;
		margin-left: 30rpx;
	}
	
	.user-info-box .username2 {
		font-size: 24rpx;
		color: #d69c63;
		margin-left: 30rpx;
	}
	
	
	.vip-card-box {
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-webkit-flex-direction: column;
		flex-direction: column;
		color: #f7d680;
		height: 240rpx;
		background: linear-gradient(to top left, #000000, #434343);
	
		border-radius: 16rpx 16rpx 0 0;
		overflow: hidden;
		position: relative;
		padding: 20rpx 24rpx;
	}
	
	.vip-card-box .card-bg {
		position: absolute;
		top: 20rpx;
		right: 0;
		width: 380rpx;
		height: 260rpx;
	}
	
	.vip-card-box .b-btn {
		position: absolute;
		right: 20rpx;
		top: 16rpx;
		width: 140rpx;
		height: 50rpx;
		text-align: center;
		line-height: 50rpx;
		font-size: 22rpx;
		color: #36343c;
		border-radius: 20px;
		background: -webkit-linear-gradient(left, #f9e6af, #ffd465);
		background: linear-gradient(left, #f9e6af, #ffd465);
		z-index: 1;
	}
	
	.vip-card-box .tit {
		font-size: 30rpx;
		color: #fff;
		margin-bottom: 28rpx;
	}
	
	.vip-card-box .tit .yticon {
		color: #122640;
		margin-right: 16rpx;
	}
	
	.vip-card-box .e-b {
		font-size: 24rpx;
		color: #d8cba9;
		margin-top: 10rpx;
	}
	
	button {
		padding: 0px;
		margin: 0px;
	}
	
	.min_height {
		min-height: 50rpx;
	}
	
	.bg_fe {
		background-color: #ffc168;
		color: #fff
	}
	
	.bg_te {
		background-color: #56a0d3;
		color: #fff
	}
	
	.cover-container {
		margin-top: -164rpx;
		padding-top: 23px;
		position: relative;
		background-color: #fff;
		height: calc(100vh - 680rpx);
	
		padding-bottom: 20rpx;
	}
	
	.user_jx {
		display: flex;
		padding: 20rpx;
		justify-content: space-between;
	}
	
	.cover-container .arc {
		position: absolute;
		left: 0;
		top: -34rpx;
		width: 100%;
		height: 36rpx;
	}
	
	.tj-sction .tj-item {
		flex-direction: column;
		font-size: 28rpx;
		margin: 20rpx 0px;
		width: 25%;
	
	}
	
	/* button{
	  width: 100%!important;
	font-weight: 400!important;
	} */
	.tj-sction .num {
		font-size: 50rpx;
		color: #fff;
		font-weight: 600;
		margin-bottom: 8rpx;
	}
	
	.tj-sction .num2 {
		font-size: 26rpx;
		color: #fff;
	
		margin-bottom: 8rpx;
	}
	
	
	.vip-card-box {
		display: flex;
		flex-direction: column;
		margin: 0px 10px;
		color: #f7d680;
		height: 240rpx;
		background-size: 100% 100%;
		border-radius: 16rpx 16rpx 0 0;
		overflow: hidden;
		position: relative;
	
		padding: 20rpx 24rpx;
	}
	
	.bg_ware {
		position: absolute;
		left: 0;
		bottom: -2rpx;
		width: 100%;
		mix-blend-mode: screen;
		height: 86rpx;
	
	}
	
	.user_form_s {
		display: flex;
		justify-content: space-between;
		width: 70%;
		margin: 0 auto;
		color: #fff;
		text-align: center;
	}
	
	.bd_user {
		position: fixed;
		right: 0px;
		padding: 3px 10px;
		background: linear-gradient(to top left, #f7ce9e, #d69c63);
		color: #fff;
		font-size: 12px;
		border-top-left-radius: 12px;
		border-bottom-left-radius: 12px;
	}
	
	
	
	
	
	.dlo {
		color: #fff;
		background: linear-gradient(to top left, #f7ce9e, #d69c63);
		animation: 1s fadeInLeft;
		padding: 0px;
		height: auto;
		padding: 2px 20px;
		font-size: 13px !important;
		margin-left: 30px;
		border-radius: 4px;
		width: 100px;
	}
	
	.buto {
		font-size: 12px;
		color: #fff;
		width: 100% !important;
		background: transparent;
		text-align: center !important;
		padding: 0px;
	}
	
	.height {
		height: 100%;
	}
	
	.nav-li {
		padding: 30rpx;
		width: calc(50% - 20rpx);
		background-image: url(https://image.weilanwl.com/color2.0/cardBg.png);
		background-size: cover;
		background-position: center;
		position: relative;
		z-index: 1;
		border-radius: 6px;
	}
	
	.nav-li::after {
		content: "";
		position: absolute;
		z-index: -1;
		background-color: inherit;
		width: 100%;
		height: 100%;
		left: 0;
		bottom: -10%;
		border-radius: 10rpx;
		opacity: 0.2;
		transform: scale(0.9, 0.9);
	}
	
	.nav-li.cur {
		color: #fff;
		background: rgb(94, 185, 94);
		box-shadow: 4rpx 4rpx 6rpx rgba(94, 185, 94, 0.4);
	}
	
	.nav-title {
		font-size: 28rpx;
		font-weight: 300;
	}
	
	.nav-title::first-letter {
		font-size: 36rpx;
		margin-right: 4rpx;
	}
	
	.nav-name {
		font-size: 24rpx;
		text-transform: Capitalize;
		margin-top: 10rpx;
		position: relative;
	}
	
	.nav-name::before {
		content: "";
		position: absolute;
		display: block;
		width: 40rpx;
		height: 6rpx;
		background: #fff;
		bottom: 0;
		right: 0;
		opacity: 0.5;
	}
	
	.nav-name::after {
		content: "";
		position: absolute;
		display: block;
		width: 100rpx;
		height: 1px;
		background: #fff;
		bottom: 0;
		right: 40rpx;
		opacity: 0.3;
	}
	
	.nav-name::first-letter {
		font-weight: bold;
		font-size: 36rpx;
		margin-right: 1px;
	}
	
	.nav-li text {
		position: absolute;
		right: 30rpx;
		top: 30rpx;
		font-size: 52rpx;
		width: 60rpx;
		height: 60rpx;
		text-align: center;
		line-height: 60rpx;
	}
	.sys_btn{
		margin-top: 300rpx;
		border-radius: 15rpx;
		background-color: #118800;
		color: #FFFFFF;
	}
</style>
